<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<title>this is a test</title>
<link rel="stylesheet"href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container" id="app">
		<%--如果购物车为空页眉的内容--%>
		<div class="row">
			<template v-if="goods.length==0">
			<div class="panel panel-default">
				<div class="panel-body">
					<p>购物车空空如也~~</p>
				</div>
			</div>
			</template>

			<%--购物车的内容--%>
			<template v-else>
			<div class="panel panel-info">
				<div class="panel-heading">
					<h3 class="panel-title">购物车</h3>
				</div>
				<div class="panel-body">
					<%--购物车表--%>
					<table class="table">
						<thead>
							<tr>
								<th><input type="checkbox" @click="selectAll"
									v-model="allChecked" /></th>
								<th>商品的图片</th>
								<th>商品</th>
								<th>商品的单价</th>
								<th>小计</th>
								<th>商品的数量</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(v,k) in goods">
								<td style="padding-top: 50px;">
									<input type="checkbox" @click="select(v.detailId)" :checked="allSelectData.indexOf(v.detailId) != -1" /></td>
								<td>
									<img :src="v.goodsImg" style="width: 125px;height: 100px"/>
								</td>
								<td style="padding-top: 50px;">
									<span class="badge badge-primary" style="font-size: 16px">商品名称:{{v.goodsName}}</span>
								</td>
								<td style="padding-top: 50px;">{{v.goodsPrice}}元</td>
								<td style="padding-top: 50px;">{{v.goodsPrice*v.buyNumber}}元</td>
								<td style="padding-top: 50px;">
									<button @click="plus(k)"
										Style="background-color: Transparent; border-style: none;">
										<span class="glyphicon glyphicon-chevron-up"
											style="color: rgb(0, 187, 0); font-size: 17px;"></span>
									</button> 
									
									<input type="text" v-model="v.buyNumber"style="width: 30px; text-align: center;background:transparent;border:1px solid #ffffff	" />

									<button @click="reduce(k)"
										Style="background-color: Transparent; border-style: none;">
										<span class="glyphicon glyphicon-chevron-down"
											style="color: rgb(0, 187, 0); font-size: 17px;">
										</span>
									</button>
								</td>
								<td style="padding-top: 50px;">
									<div class="btn-group-xs">
										<button @click="del(k)" type="button" class="btn btn-danger">
											<span class="glyphicon glyphicon-trash"
												style="color: rgb(255, 255, 255); font-size: 18px; text-shadow: rgb(0, 0, 0) 0px 0px 0px;"></span>
										</button>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<%--商品价格总计--%>
				<div class="panel-footer" style="text-align: right">
					<button @click="postData"
						Style="background-color: Transparent; border-style: none;">
						<span class="glyphicon glyphicon-shopping-cart"
							style="color: rgb(0, 185, 255); font-size: 32px;"></span>
					</button>
					选中的金额 <span class="badge">{{totalPrice}}元</span>

				</div>
			</div>
			</template>
		</div>
	</div>
	<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            //购物车的数据
            goods: [ ],
            //控制全选
            allChecked: false,
            //商品数据选中
            allSelectData: [],
        },
        //vue对象成功初始化以后自动调用
        created: function () {
            this.getData();
        },
        mounted() {
            //控制加载完成页面之后全部选中
            this.goods.forEach((v, k) => {
                this.allSelectData.push(v.detailId);
            });
        },
        methods: {
            // 购物车中加按钮的操作
            plus(k) {
                this.goods[k].buyNumber++;
            },
            // 购物车中减按钮的操作
            reduce(k) {
                this.goods[k].buyNumber--;
                if (this.goods[k].buyNumber === 0) {
                    this.goods.splice(k, 1);
                }
            },
            //购物车删除按钮的方法
            del(k) {
                this.goods.splice(k, 1);
            },
            //单机全选按钮
            selectAll() {
                //判断是否选中
                if (!event.currentTarget.checked) {
                    //取消全选
                    this.allSelectData = [];
                } else {
                    //设置一个自增变量
                    this.goods.forEach((v, k) => {
                        this.allSelectData.push(v.detailId);
                    });
                }
            },
            //为每一个复选框附加方法
            select(id) {
                //知道商品所对应的商品编号是否在allSelectData中
                var res = this.allSelectData.indexOf(id);
                //如果取消选中,删除信息,如果选中则添加信息
                res == -1 ? this.allSelectData.push(id) : this.allSelectData.splice(res, 1);
                //如果有一个不选中则全选按钮不选中,若有全部选中则全选按钮选中
                this.allChecked = this.goods.length == this.allSelectData.length;
            },
            getData: function () {
                 this.$http.get("http://localhost:8080/MaYun_SSM_Project/getData.action").then(response => {
                     if (response.body.length == 0) {
                         alert("抱歉数据传入失败");
                     } else {
                         this.goods = response.body;
                     }
                 });
             },
            postData: function(){
                var selectContent = this.allSelectData;
                //发送 post 请求
                this.$http.post('http://localhost:8080/MaYun_SSM_Project/postData.action',{goodsContent:JSON.stringify(this.goods),idContent:JSON.stringify(this.allSelectData)},{emulateJSON:true}).then(function(res){
                    document.write(res.body);
                },function(res){
                    console.log(res.status);
                });
            }
        },
        computed: {
            //计算价格
            totalPrice(){
                var total = 0;
                var array = this.allSelectData;
                this.goods.forEach(function (v, k) {
                    var res = array.indexOf(v.detailId);
                    // 计算总价时,只计算在allSelectData中的商品
                    if (res != -1) {
                        total += v.buyNumber * v.goodsPrice;
                    }
                });
                return total;
            },
        }
    })
</script>
</body>
</html>
